<template>
  <div class="prod">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list ref="vanlist" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="prod-item" v-for="item in defaultProductList.list" :key="item.id" @click="toDetail(item.id)">
          <img :src="item.imageHost + item.mainImage" alt="" class="prod-img" />
          <div class="prod-con">
            <div class="name">{{ item.name }}</div>
            <div class="subtitle">{{ item.subtitle }}</div>
            <div class="param">
              <span class="real-price"><span>￥</span> {{ item.price }}</span>
              <s class="price"><span>￥</span>{{ item.originalPrice }}</s>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getProductList } from '@/http/index.js'
// import { mapState } from 'vuex'
export default {
  data() {
    return {
      defaultProductList: [],
      orderBy: 'default',
      pageSize: 10,
      pageNum: 1,
      isLoading: false,
      loading: false,
      finished: false,
    }
  },
  computed: {
    // ...mapState(['productList']),
  },
  mounted() {
    this.$bus.$on('sort', (data) => {
      // console.log(data)
      this.orderBy = data
    })
    // this.$nextTick(() => {
    //   // console.log(this.$parent)
    //   this.$refs.vanlist.$el.style.height = window.screen.height - this.$parent.$children[0].$el.clientHeight - 50 + 'px'
    //   this.onRefresh()
    // })
  },
  watch: {
    orderBy(newVal) {
      // console.log(newVal)
      getProductList({ params: { orderBy: newVal } }).then((res) => {
        // this.$set(this.defaultProductList, 0, res.data)
        this.defaultProductList = res.data
        // console.log(this.defaultProductList)
      })
    },
  },
  created() {
    this.fetchProductList()
  },
  methods: {
    fetchProductList() {
      getProductList({ orderBy: this.orderBy }).then((res) => {
        this.defaultProductList = res.data
        // console.log(res.data)
        // console.log('请求数据')
        // this.loading = false
        // if (res.data.list.length !== this.pageSize) {
        //   this.finished = true
        // }
        // // console.log(this.isLoading)
        // if (this.isLoading) {
        //   // 下拉刷新赋值新数据
        //   this.defaultProductList = res.data.list
        //   this.isLoading = false
        //   this.finished = false // 允许上拉加载
        // } else {
        //   // 上拉加载更多 合并数据
        //   this.defaultProductList = this.defaultProductList.concat(res.data.list)
        // }
      })
      // this.$store.dispatch('getProductDataList')
    },
    toDetail(id) {
      this.$router.push(`/productDetail/${id}`)
    },
    onLoad() {
      this.loading = true
      // console.log('--')
      this.fetchProductList({ pageSize: this.pageSize, pageNum: this.pageNum++ })
    },
    onRefresh() {
      this.isLoading = true
      // console.log('-111-')
      this.pageNum = 1
      this.fetchProductList({ pageSize: this.pageSize, pageNum: this.pageNum++ })
    },
  },
  beforeCreate() {
    this.$bus.$off('sort')
  },
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/mixin.scss';
.prod {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
  height: auto;
  overflow-y: scroll;
  .prod-item {
    @include fj;
    margin-top: 20px;
    padding: 30px 0;
    width: 100%;
    height: 150px;
    background-color: #fafafa;
    .prod-img {
      display: block;
      width: 150px;
      height: 100%;
      object-fit: cover;
      border-radius: 16px;
    }
    .prod-con {
      @include fj;
      flex-direction: column;
      margin-left: 10px;
      width: 80%;
      box-sizing: border-box;
      .name,
      .subtitle {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .param {
        .real-price {
          font-size: 30px;
        }
        .price {
          margin-left: 5px;
          color: #666;
        }
      }
    }
  }
  &:last-of-type {
    padding-bottom: 150px;
  }
}
</style>
